<script lang="ts" setup>
import { ref, defineOptions } from 'vue'
import { useTouristStore } from '@/stores'
import router from '@/router'
const changeImage = ref('/src/assets/home/h6.jpg')
defineOptions({
  name: 'indexHome',
})
const touristStore = useTouristStore()
if (touristStore.isTokenExpired()) {
  touristStore.$reset()
}
// 统计页面跳转按钮
const statistics = () => {
  router.push('/home/statistics')
  changeImage.value = '/src/assets/statistics/true.png'
}
// 主页面跳转按钮
const main = () => {
  router.push('/home/main')
  changeImage.value = '/src/assets/home/h6.jpg'
}
// 新闻页面跳转按钮
const news = () => {
  router.push('/home/statistics')
  changeImage.value = '/src/assets/statistics/true.png'
}
// 历史页面跳转按钮
const history = () => {
  router.push('/home/statistics')
  changeImage.value = '/src/assets/statistics/true.png'
}
</script>

<template>
  <div class="container" :style="{ backgroundImage: 'url(' + changeImage + ')' }">
    <div class="header">
      <el-image class="logo" src="/src/assets/home/商标.png"></el-image>
      <el-image class="business" src="/src/assets/home/商名.png"></el-image>
      <el-button class="home hb" @click="main()" type="success" plain>首页</el-button>
      <el-button class="news hb" @click="news()" type="info" plain>新闻</el-button>
      <el-button class="history hb" @click="history()" type="warning" plain>历史</el-button>
      <el-button class="statistics hb" @click="statistics()" type="primary" plain
        >旅游统计</el-button
      >
      <!-- <el-avatar class="avatar" size="large" src="/src/assets/home/userdefault.png"> -->
    </div>
    <RouterView class="main"></RouterView>
  </div>
</template>

<style lang="scss" scoped>
.container {
  // position: relative;
  width: 100%;
  height: 100%;
  .header {
    position: relative;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 90px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2); /* 半透明背景，必要！ */
    backdrop-filter: blur(10px); /* 高斯模糊 */
    -webkit-backdrop-filter: blur(10px);
    .logo {
      position: absolute;
      top: 0;
      left: 2%;
      width: 6%;
      height: 100%;
    }
    .business {
      position: absolute;
      top: 20%;
      left: 10%;
      width: 10%;
      height: 60%;
    }
    .hb {
      position: absolute;
      top: 0;
      width: 8%;
      height: 100%;
      background: transparent;
      border: transparent;
      font-family: STXingkai;
      font-size: 30px;
    }
    .home {
      left: 30%;
    }
    .news {
      left: 40%;
    }
    .history {
      left: 50%;
    }
    .statistics {
      left: 60%;
    }
    .avatar {
      position: absolute;
      right: 5%;
      top: 0;
      width: 3%;
      height: 100%;
      background: transparent;
    }
  }
}
</style>
